/**
 * 1.需求 当changBtn被选中时 regBtn变为可以点击状态
 */
//获取元素
let changBtn = document.querySelector('#changBtn');
let regBtn = document.querySelector('#regBtn');

//注册change事件
changBtn.addEventListener('change', function () {
    if (changBtn.checked) { //选中 开启
        regBtn.disabled = false
        regBtn.style.backgroundColor = '#00bdff'
        regBtn.style.color = '#fff'
    } else { //没选中 禁用
        regBtn.disabled = true
        regBtn.style.backgroundColor = '#ccc'
        regBtn.style.color = '#333'
    }
})

/**
 * 2.需求 输入框开始输入时 显示删除图标 
 *        点击删除图标 清空输入框内容 并且隐藏自己
 */
//获取元素
let regInput = document.querySelectorAll('.reg-item input');
let delIcon = document.querySelectorAll('.clear-img')
//console.log(regInput);
//遍历
regInput.forEach(function (dom, index) {
    dom.addEventListener('input', function () {
        delIcon[index].style.display = 'block'
    })

    //注册点击事件
    delIcon[index].addEventListener('click', function () {
        dom.value = ''
        this.style.display = 'none'
    })
})

/**
 * 3.需求 表单验证 当输入框失焦时验证
 */
let inputCheckArr = [
    nameExp = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/, //用户名 6-12位字母开头 可以又字母数字下划线
    phoneExp = /^1[345678][0-9]{9}$/, //手机号  1开头 13位
    codeExp = /^[a-zA-Z][a-zA-Z0-9_]{3}$/, //验证码  必须字母开头 四位数字
    pwdExp = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/ //密码  6-12位字母开头 可以又字母数字下划线
]
//获取元素
let error = document.querySelectorAll('.error')
//注册失焦事件
regInput.forEach(function (dom, index) {
    dom.addEventListener('blur', function () {
        let bool = inputCheckArr[index].test(this.value)
        if (bool) {
            error[index].style.display = 'none'
        } else {
            error[index].style.display = 'block'
        }
    })
})

/**
 * 4.需求 点击注册按钮时 进行表单验证
 */
regBtn.addEventListener('click', function () {
    for (let i = 0; i < regInput.length; i++) {
        let bool = inputCheckArr[i].test(regInput[i].value)
        if (bool) {
            error[i].style.display = 'none'
        } else {
            error[i].style.display = 'block'
            return //如果有一个输入错误则退出函数
        }
    }
    location.href='../page/apilist.html'
})